@extends('admin::layouts.master')
@section('title')
    {{$title}}
@endsection
<style>
    .layui-upload-img {
        width: 150px; height: 100px;
    }
    .close{
        position: relative; top: -45px; right: 10px; border-radius: 50%; background-color: #FFFFFF;color: #FFF; opacity:0.1;
    }
    .img-list:hover .close
    {
        opacity:1; background-color: red;
    }
</style>
@section('tab')
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <input type="hidden" name="id" value="{{$data['id']}}">
                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>服务名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="服务名称" value="{{$data['name']}}" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>服务类型</label>
                    <div class="layui-input-inline">
                        <select name="type" lay-verify="required">
                            <option value="">请选择</option>
                            @if($type)
                                @foreach($type as $key => $value)
                                    <option value="{{$value['id']}}" @if($value['id'] == $data['type']) selected @endif>{{$value['title']}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>是否上架</label>
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="required">
                            <option value="1" @if($data['status']==1) selected @endif>上架</option>
                            <option value="2" @if($data['status']==2) selected @endif>下架</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>服务价格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="price" placeholder="服务价格" value="{{$data['price']}}" lay-verify="required|number" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>价格说明</label>
                    <div class="layui-input-block">
                        <textarea name="price_indication" placeholder="请输入内容" class="layui-textarea" style="width: 50%;">{{$data['price_indication']}}</textarea>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>图片详情</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            @if($data['pic'])
                                @foreach($data['pic'] as $ky => $item)
                                <span class="img-list">
                                    <img src="{{$item['picurl']['full_src']}}" class="layui-upload-img">
                                    <input type="hidden" name="img[{{$ky}}][picurl]" value="{{$item['picurl']['src']}}">
                                    <input type="hidden" name="img[{{$ky}}][id]" value="{{$item['id']}}">
                                    <i class="layui-icon close del_pic" del-id="{{$item['id']}}">ဆ</i>
                                </span>
                                @endforeach
                            @endif
                            <img src="admin/images/upimg.png" id="more_img" class="layui-upload-img">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>售后服务</label>
                    <div class="layui-input-block">
                        <textarea name="fuwu" placeholder="请输入内容" class="layui-textarea" style="width: 50%;">{{$data['fuwu']}}</textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>图文详情</label>
                    <div class="layui-input-block" style="width: 50%;">
                        {!! baidu_ueditor($data['detail'], 'detail') !!}
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button class="layui-btn" lay-filter="add" lay-submit="">编辑</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('tab_js')
    <script>
        layui.use(['form', 'layer', 'jquery', 'upload'], function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload;

            //多图片上传
            upload.render({
                elem: '#more_img'
                ,url: 'admin-upload-img'
                ,acceptMime: 'image/jpg, image/png, image/jpeg'
                // ,multiple: true
                ,size: 1024
                ,done: function (res) {
                    //上传完毕
                    var count = $('.layui-upload-img').length-1;
                    var imgdta = '<span class="img-list"><img src="' + res.url + '" class="layui-upload-img">' +
                        '<input type="hidden" name="img['+count+'][picurl]" value="' + res.src + '">' +
                        '<input type="hidden" name="img['+count+'][id]" value="0">'+
                        '<i class="layui-icon close remove_pic">ဆ</i></span>';
                    $('#more_img').before(imgdta);

                    countNum();
                }
            });

            //删除图片
            $(document).on('click', '.del_pic', function () {
                var id = $(this).attr('del-id');
                var that = $(this);
                if (id) {
                    layer.confirm('确定删除已有数据吗？', {btn: ['确定', '取消']}, function () {
                        $.ajax({
                            type: "PUT",
                            url: "admin-repairstore-delPic",
                            data:{id:id},
                            dataType: "json",
                            success: function (obj) {
                                console.log(obj);
                                if (obj.state == 0) {
                                    that.parent().remove();
                                    countNum();
                                    layer.msg('删除成功', {time: 2000, icon: 6});
                                } else {
                                    layer.msg('删除失败', {time: 2000, icon: 5});
                                }
                            }, error: function () {
                                alert("发生错误：");
                            }
                        });
                    });
                }
            });
            //删除图片
            $(document).on('click', '.remove_pic', function () {
                $(this).parent().remove();
                countNum();
            });

            function countNum(){
                var count = $('.layui-upload-img').length;
                if(count >= 7){
                    $('#more_img').hide();
                }else {
                    $('#more_img').show();
                }
            }
            countNum();

            //监听提交
            form.on('submit(add)', function (data) {
                $.ajax({
                    url: js_url('admin-repairstore-update'),
                    type: 'post',
                    data: data.field,
                    dataType: "json",
                    success: function (result) {
                        if (result.state === 0) {
                            layer.msg(result.msg, {time: 600, icon: 6}, function () {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                        } else {
                            layer.msg(result.msg, {time: 600, icon: 5});
                        }
                    }
                });
                return false;

            });
        });

    </script>
@endsection




